<template>
  <!--供应商信息-物资供应列表-新增/编辑/详情物资供应弹窗-表单-->
  <a-spin :spinning="confirmLoading">
    <j-form-container :disabled="formDisabled">
      <a-form-model ref="form" :model="model" :rules="validatorRules" slot="detail">
        <a-row>
          <a-col :span="10">
            <a-form-model-item
              label="一级分类名称"
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
              prop="categoryOneId"
              style="display: inline-block; width: 500px!important;height: 40px;"
            >
              <a-select
                :options="levelOneOptions"
                v-model="model.categoryOneId"
                placeholder="请输入一级分类名称"
                @change="changeLevelOne"
              >
              </a-select>
            </a-form-model-item>
          </a-col>
          <a-col :span="10">
            <a-form-model-item
              label="二级分类名称"
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
              prop="categoryTwoId"
              style="display: inline-block; width: 500px!important;height: 40px;"
            >
              <a-select
                :options="levelTwoOptions"
                v-model="model.categoryTwoId"
                placeholder="请输入二级分类名称"
                @change="changeLevelTwo"
              >
              </a-select>
            </a-form-model-item>
          </a-col>
          <a-col :span="10">
            <a-form-model-item
              label="三级分类名称"
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
              prop="categoryThreeId"
              style="display: inline-block; width: 500px!important;height: 40px;"
            >
              <a-select
                :options="levelThreeOptions"
                v-model="model.categoryThreeId"
                placeholder="请输入三级分类名称"
                @change="changeLevelThree"
              >
              </a-select>
            </a-form-model-item>
          </a-col>
          <a-col :span="10">
            <a-form-model-item
              label="供应商"
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
              prop="supplierId"
              style="display: inline-block; width: 500px!important;"
            >
              <a-select :options="supplierList" v-model="model.supplierId" placeholder="请输入供应商"></a-select>
            </a-form-model-item>
          </a-col>
          <a-col :span="10">
            <a-form-model-item
              label="标准名称"
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
              prop="platformProductId"
              style="display: inline-block; width: 500px!important;"
            >
              <a-select
                :options="StandardList"
                v-model="model.platformProductId"
                placeholder="请输入标准名称"
                @change="handleCheckedCitiesChange"
              ></a-select>
            </a-form-model-item>
          </a-col>
          <a-col :span="10">
            <a-form-model-item
              label="SEO名称"
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
              prop="seoName"
              style="display: inline-block; width: 500px!important;height: 40px;"
            >
              <a-input v-model="model.seoName" placeholder="请输入SEO名称"></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="10">
            <a-form-model-item
              label="型号"
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
              prop="model"
              style="display: inline-block; width: 500px!important;height: 40px;"
            >
            <!-- <el-checkbox-group v-model="model.model">
                <el-checkbox v-for="(item, index) in modelList" :label="型号" :key="index">{{item.model}}</el-checkbox>
            </el-checkbox-group> -->

              <j-multi-select-tag  :options="modelList" mode="multiple" v-model="model.model" placeholder="请输入型号" style="overflow: auto;height: 40px;">
              </j-multi-select-tag>

            </a-form-model-item>
          </a-col>
          <a-col :span="10">
            <a-form-model-item
              label="调用品牌"
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
              prop="brand"
              style="display: inline-block; width: 500px!important;height: 40px;"
            >
              <a-select :options="BrandList" v-model="model.brand" placeholder="请输入调用品牌"></a-select>
            </a-form-model-item>
          </a-col>
          <a-col :span="10">
            <a-form-model-item
              label="是否主营"
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
              prop="isMainBusiness"
              style="display: inline-block; width: 500px!important;height: 40px;"
            >
              <j-dict-select-tag
                type="list"
                v-model="model.isMainBusiness"
                dictCode="isMainBusiness"
                placeholder="请选择是否主营"
              />
            </a-form-model-item>
          </a-col>
          <!-- <a-col :span="10">
            <a-form-model-item
              label="规格"
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
              prop="specification"
              style="display: inline-block; width: 500px!important;height: 40px;"
            >
              <a-input v-model="model.specification" placeholder="请输入规格"></a-input>
            </a-form-model-item>
          </a-col> -->
          <a-col :span="10">
            <a-form-model-item
              label="计量单位"
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
              prop="specification"
              style="display: inline-block; width: 500px!important;height: 40px;"
            >

              <a-input   v-model="model.unit" :options="unit"  placeholder="请输入计量单位"></a-input>
            </a-form-model-item>
          </a-col>
          <!-- <a-col :span="10">
            <a-form-model-item
              label="价格"
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
              prop="specification"
              style="display: inline-block; width: 500px!important;height: 40px;"
            >
              <a-input v-model="model.price" placeholder="请输入价格"></a-input>
            </a-form-model-item>
          </a-col> -->
          <a-col :span="10">
            <a-form-model-item
              label="图片"
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
              prop="imgUrl"
              style="display: inline-block; width: 500px!important;height: 40px;"
            >
              <a-input v-model="model.imgUrl" placeholder="请输入图片地址">

              </a-input>
              <a-button type="submit" @click="upLoad">上传</a-button>
            </a-form-model-item>
          </a-col>
          <a-col :span="10">
            <a-form-model-item
              label="备注"
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
              prop="remark"
              style="display: inline-block; width: 500px!important;height: 40px;"
            >
              <a-textarea cols="20"  v-model="model.remark" placeholder="请输入备注"></a-textarea>
            </a-form-model-item>
          </a-col>
        </a-row>
      </a-form-model>
    </j-form-container>
  </a-spin>
</template>

<script>
import { httpAction, getAction } from '@/api/manage'

export default {
  name: 'WtSupplierProductForm',
  components: {},
  props: {
    //表单禁用
    disabled: {
      type: Boolean,
      default: false,
      required: false
    }
  },
  data() {
    return {
      model: {
        categoryOneId: '',
        categoryTwoId: '',
        categoryThreeId: '',
        supplierId: '',
        platformProductId: '',
        brand: '',
        model:'',
        unit:''
      },
      labelCol: {
        xs: { span: 5 },
        sm: { span: 5 }
      },
      wrapperCol: {
        xs: { span: 5 },
        sm: { span: 7 }
      },
      confirmLoading: false,
      validatorRules: {
        platformProductId: [{ required: true, message: '标准名称不能为空', trigger: 'blur' }],
        supplierId:[{required: true, message: '供应商不能为空', trigger: 'blur' }]
      },
      levelOneOptions: [],
      levelTwoOptions: [],
      levelThreeOptions: [],
      treeData: [],
      StandardData: [],
      StandardList: [],
      BrandData: [],
      BrandList: [],
      supplierData: [],
      supplierList: [],
      modelList:[],
      modelData:[],
      unitData:[],
      unitList:[],
      obj:[],
      url: {
        add: '/product/wtSupplierProduct/add',
        edit: '/product/wtSupplierProduct/edit',
        queryById: '/product/wtSupplierProduct/queryById'
      }
    }
  },
  computed: {
    formDisabled() {
      return this.disabled
    }
  },
  created() {
    //备份model原始值
    this.modelDefault = JSON.parse(JSON.stringify(this.model))
  },
  methods: {
    changeLevelOne() {
      this.clearForm()
      this.model.categoryTwoId = this.model.categoryThreeId = ''
      this.levelThreeOptions = []
      const item = this.treeData.find(v => v.id === this.model.categoryOneId)
      this.levelTwoOptions = (item.children || []).map(v => {
        return {
          ...v,
          value: v.id,
          label: v.name
        }
      })
     this.getList('categoryOneId', this.model.categoryOneId,this.model.model,this.model.unit)
    },
    changeLevelTwo() {
      this.clearForm()
      this.model.categoryThreeId = ''
      const levelOneItem = this.treeData.find(v => v.id === this.model.categoryOneId)
      const levelTwoItem = levelOneItem.children.find(v => v.id === this.model.categoryTwoId) || []
      this.levelThreeOptions = (levelTwoItem.children || []).map(v => {
        return {
          ...v,
          value: v.id,
          label: v.name
        }
      })
      this.getList('categoryTwoId', this.model.categoryTwoId,this.model.unit)

    },
    changeLevelThree(){
      this.clearForm()
     this.getList('categoryThreeId', this.model.categoryThreeId)
    },

    getList(category, id) {
      getAction(`/wtSupplier/getListByCategory?${category}=${id}`).then(res => {
        if (res.success) {

          this.supplierData = []
          let supplierList1 = res.result
          for (let a = 0; a < supplierList1.length; a++) {
            let temp = supplierList1[a]
            temp.isLeaf = temp.leaf
            this.supplierData.push(temp)
          }
          this.supplierList = [...this.supplierData].map(v => {
            return {
              ...v,
              value: v.id,
              label: v.name

            }
          })
          // console.log('supplierList:', this.supplierList)
        }
      })

      getAction(`/product/wtPlatformProduct/getListByCategory?${category}=${id}`).then(res => {
        if (res.success) {
          this.StandardData = []
          let StandardList1 = res.result

          for (let a = 0; a < StandardList1.length; a++) {
            let temp = StandardList1[a]
            temp.isLeaf = temp.leaf
            this.StandardData.push(temp)
          }
          this.StandardList = [...this.StandardData].map(v => {
            return {
              ...v,
              value: v.id,
              label: v.name,
            }

          })

        // console.log('StandardList:', this.StandardList)
        }
      })

      getAction(`/wtBrand/getListByCategory?${category}=${id}`).then((res)=>{
          if(res.success){

            this.BrandData=[]
            let BrandList1=res.result
            for(let a=0;a<BrandList1.length;a++){
              let temp = BrandList1[a];
              temp.isLeaf = temp.leaf;
              this.BrandData.push(temp);
            }

            this.BrandList = [...this.BrandData].map(v=>{
              // console.log('few',this.BrandData);
              return {
                ...v,
                value: v.id,
                label: v.name
              }
            })

        // console.log('BrandList:', this.BrandList)
          }
        })
    },

    clearForm(){
      this.model.model=this.model.unit=this.model.brand = this.model.supplierId = this.model.platformProductId = ''
    },
    loadTree() {
      var that = this
      getAction('/wtCategory/list').then(res => {

        if (res.success) {
          // console.log(res)
          that.treeData = []
          var treeList = res.result
          for (let a = 0; a < treeList.length; a++) {
            let temp = treeList[a]
            temp.isLeaf = temp.leaf
            that.treeData.push(temp)
          }
          that.levelOneOptions = [...that.treeData].map(v => {
            return {
              ...v,
              value: v.id,
              label: v.name
            }
          })

        var list = []
        list = that.levelOneOptions.filter(item => {
          if(item.id === that.model.categoryOneId) {
          return item.children
        }
      })
        if (list.length > 0) {
          that.levelTwoOptions = [...list[0].children].map(v=>{
            return {
              ...v,
            value: v.id,
            label: v.name
          }
        })
        }
        var list2 = []
        list2 = that.levelTwoOptions.filter(item => {
          if(item.id === that.model.categoryTwoId) {
          return item.children
        }
      })
        if (list2.length > 0) {
          that.levelThreeOptions = [...list2[0].children].map(v=>{
            return {
              ...v,
            value: v.id,
            label: v.name
          }
        })
        }
        // console.log('供应商id:', that.model.supplierId)
        this.getList('categoryThreeId', that.model.categoryThreeId)
        }
      })
    },
    add() {
      this.edit(this.modelDefault)
    },
    edit(record) {
      this.model = Object.assign({}, record)
      this.visible = true
      this.loadTree()
    },
    submitForm() {
      const that = this
    //  this.modelList.join(',')
      // 触发表单验证
      this.$refs.form.validate(valid => {
        if (valid) {
          that.confirmLoading = true
          let httpurl = ''
          let method = ''
          if (!this.model.id) {
            httpurl += this.url.add
            method = 'post'
          } else {
            httpurl += this.url.edit
            method = 'put'
          }



          httpAction(httpurl, this.model, method)
            .then(res => {
              if (res.success) {
                that.$message.success(res.message)
                that.$emit('ok')
              } else {
                that.$message.warning(res.message)
              }
            })
            .finally(() => {
              that.confirmLoading = false
            })
        }
      })
    },


    handleCheckedCitiesChange(){
      this.StandardList.forEach(item=>{
        if(item.id === this.model.platformProductId){
          this.modelList = item.model.split(',').map(v=>({value:v,label:v}))
          this.model.unit = item.unit

        }

      })


    }
  }
}
</script>
